<!-- 资产详情 -->

<template>
  <el-tabs v-model="model" class="AssetDetail">
    <el-tab-pane label="基础信息" name="first">
      <EasyScroll class="AssetDetail-base" full>
        <WebShow>
          <DeviceBase />
          <DeviceBackup />
          <DeviceFile />
        </WebShow>
      </EasyScroll>
    </el-tab-pane>

    <el-tab-pane label="巡检记录" name="second">
      <DeviceInspection />
    </el-tab-pane>

    <el-tab-pane label="保养记录" name="third">
      <DeviceMaintenance />
    </el-tab-pane>

    <el-tab-pane label="报修记录" name="fourth">
      <DeviceRepair />
    </el-tab-pane>

    <el-tab-pane label="更新记录" name="fifth">
      <DeviceOperate />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import store from '@admin/components/detail/DetailDevice/store'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'AssetDetail',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixStore(store)],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(
    require.context('@admin/components/detail/DetailDevice/MyDetail', true, /vue$/),
    require.context('./', true, /vue$/),
  ),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      model: 'first',
    }
  },

  /**
   * 监听属性 (深度 deep 首次 immediate)
   */
  watch: {
    /**
     * 监听 ID 变化
     */
    id(id) {
      this.model = 'first'
      this.setOne({ id })
      this.startOne()
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
